<template>
        <!---左侧导航栏-->
        <el-row class="h-full" :gutter="5">
            <el-col :span="8" class="h-full split-panel">
                <div class="p-2 h-full m-2 bg-white rounded-lg">
                    <PromptPage @update="onSave"></PromptPage>
                </div>
            </el-col>
             <!-- 右侧主区域（70%宽度） -->
            <el-col :span="16" class="h-full split-panel">
                <!--右侧上半部分（40%高度）-->
                <el-row :gutter="5" class="h-full">
                    <el-col :span="8" class="split-panel">
                        <div class="p-2 h-full m-2 bg-white rounded-lg">
                            <SettingPage @update="onSave"></SettingPage>
                        </div>
                    </el-col>
                    <!-- 右侧下半部分（60%高度） --> 
                    <el-col :span="16" class="split-panel">
                        <div class="pb-10 h-full w-full bg-white rounded-xl m-2">
                            <chat></chat>
                        </div>                
                    </el-col>
                </el-row>
            </el-col>
        </el-row>    
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { getObj } from '/@/api/aigc/app';
import { useMessage } from '/@/hooks/message';
import { useAppStore } from '/@/stores/aigc/appStore';
import { useChatStore } from '/@/stores/aigc/chatStore';
import { formatToDateTime } from '/@/utils/formatTime';
    const PromptPage=defineAsyncComponent(()=>import('./prompt/index.vue'));
    const SettingPage=defineAsyncComponent(()=>import('./settings/index.vue'));
    const Chat=defineAsyncComponent(()=>import('/@/views/aigc/chat/chat.vue'));
    const {t}=useI18n();
    const router=useRouter();
    const appStore=useAppStore();
    const chatStore=useChatStore();
    const loading=ref(false);
    const form=ref<any>({});
    onMounted(async () => {
        await fetchData();
    });

    async function fetchData() {
        loading.value = true;
        const id = router.currentRoute.value.query.id;
        const data=await getObj(id);
        form.value=data.data;
        appStore.knowledgeIds=data?.data?.knowledgeIds;
        appStore.knowledges=data?.data?.knowledges;
        chatStore.modelId=data?.data?.modelId;
        chatStore.appId=data?.data.id;
        loading.value = false;
    }
    async function onSave(){
        loading.value=true;
        form.value.saveTime=formatToDateTime(new Date());
        await appStore.updateInfo();
        useMessage().info('应用配置保存成功');
        loading.value=false;
    }
</script>
<style lang="css" scoped>
    .split-panel{
        position: relative;
        &:before{
            content:'';
            position:absolute;
            right: -5px;
            top:0;
            bottom: 0;
            width: 5px;
            background: #f5f7fa;
            cursor: col-resize;
            z-index: 1;
        }
    }
</style>